<layout name='layout/main' />
<header class="am-header am-header-default">
	<h1 class="am-header-title">交强险信息</h1>
</header>

<form action="<{:U('Baoxian/save')}>" method="post" class="ajax am-form address-form" id="doc-vld-msg">
	<div class="am-form-group">
        <label>行车证</label>
        <div class="am-g">
        	<div class="am-u-sm-6" onclick="uploadImg(1)">
        		<div class="card"><img src="<{:RES}>/image/card1.jpg" id="img1"></div>
        		<input type="hidden" id="card1" name="card1">
        	</div>
        	<div class="am-u-sm-6" onclick="uploadImg(2)">
        		<div class="card"><img src="<{:RES}>/image/card2.jpg" id="img2"></div>
        		<input type="hidden" id="card2" name="card2">
        	</div>
        </div>
    </div>

    <div class="am-form-group">
        <label>身份证</label>
        <div class="am-g">
        	<div class="am-u-sm-6" onclick="uploadImg(3)">
        		<div class="card"><img src="<{:RES}>/image/card3.jpg" id="img3"></div>
        		<input type="hidden" id="card3" name="card3">
        	</div>
        	<div class="am-u-sm-6" onclick="uploadImg(4)">
        		<div class="card"><img src="<{:RES}>/image/card4.jpg" id="img4"></div>
        		<input type="hidden" id="card4" name="card4">
        	</div>
        </div>
    </div>

    <div class="am-form-group">
        <label>姓名</label>
        <input type="text" name="name" id="name" class="am-input-sm" placeholder="您的姓名" value="<{$address['name']}>" required/>
    </div>

    <div class="am-form-group">
        <label>手机号码</label>
        <input type="text" name="mobile" id="mobile" class="js-pattern-mobile am-input-sm" placeholder="请输入手机号码" value="<{$address['mobile']}>" required/>
    </div>

    <div class="am-form-group">
        <label>收件地址</label>
        <input type="text" name="address" id="address" class="am-input-sm" value="<{$address['address']}>" placeholder="邮寄保单的收件地址" required/>
    </div>

    <div class="am-form-group">
        <label>固话</label>
        <input type="text" name="phone" id="phone" class="am-input-sm" placeholder="备用固定号码" />
    </div>

    <div class="am-form-group">
        <label>发动机号</label>
        <input type="text" name="enCode" id="enCode" class="am-input-sm" required/>
    </div>

    <div class="am-form-group">
        <label>车架号</label>
        <input type="text" name="carCode" id="carCode" class="am-input-sm" required/>
    </div>

    <div class="am-form-group">
        <label>是否有牌照</label>
        <div>
            <input type="radio" value="1" name="shangpai" required onclick="checkPai()"> 已上牌
            <input type="radio" value="0" name="shangpai" required onclick="checkPai()"> 未上牌
        </div>
    </div>

    <div class="am-form-group" id="hegezheng" style="display:none">
        <label>车辆合格证</label>
        <div class="am-g">
            <div class="am-u-sm-6" onclick="uploadImg(5)">
                <div class="card"><img src="<{:RES}>/image/card5.jpg" id="img5"></div>
                <input type="hidden" id="card5" name="card5">
            </div>
        </div>
    </div>

    <div class="am-form-group" id="spTime" style="display:none">
        <label>上牌时间</label>
        <input type="date" name="buyDate" id="buyDate" class="am-input-sm" required/>
    </div>

    <div class="am-form-group">
        <label>车船税</label>
        <div>
            <input type="radio" value="0" name="chechuanshui" required onclick="checkShui()"> 未交
            <input type="radio" value="1" name="chechuanshui" required onclick="checkShui()"> 已交
        </div>
    </div>

    <div class="am-form-group" id="wanshui" style="display:none">
        <label>完税证明</label>
        <div class="am-g">
            <div class="am-u-sm-6" onclick="uploadImg(6)">
                <div class="card"><img src="<{:RES}>/image/card6.jpg" id="img6"></div>
                <input type="hidden" id="card6" name="card6">
            </div>
        </div>
    </div>

    <div class="am-form-group">
        <label>排量</label>
        <select name="pailiang" id="pailiang" class="am-input-sm" required>
            <option value="">请选择</option>
            <option value="1.0升(含)以下" data-value="180">1.0升(含)以下，180元</option>
            <option value="1.0升-1.6升(含)" data-value="300">1.0升-1.6升(含)，300元</option>
            <option value="1.6升-2.0升(含)" data-value="420">1.6升-2.0升(含)，420元</option>
            <option value="2.0升-2.5升(含)" data-value="720">2.0升-2.5升(含)，720元</option>
            <option value="2.5升-3.0升(含)" data-value="1500">2.5升-3.0升(含)，1500元</option>
            <option value="3.0升-4.0升(含)" data-value="3000">3.0升-4.0升(含)，3000元</option>
            <option value="4.0升以上" data-value="4500">4.0升以上，4500元</option>
        </select>
    </div>

    <div class="am-form-group">
        <label>补交税金：<span id="bujiao">0</span></label>        
    </div>

	<p><button class="am-btn am-btn-danger am-btn-block" id="subBtn">提交</button></p>
    <input type="hidden" name="order_no" value="<{$list['order_no']}>">
    <input type="hidden" name="pname" value="<{$list['pname']}>">
    <input type="hidden" name="detailID" value="<{$list['id']}>">
    <input type="hidden" name="memberID" value="<{$_user['memberID']}>">
    <input type="hidden" name="money" id="money" value="0">
</form>

<div class="am-modal am-modal-no-btn" tabindex="-1" id="upModel">
	<div class="am-modal-dialog">
		<div class="am-modal-hd">选择照片
		<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
		</div>
	    <div class="am-modal-bd">
	    	<form action="<{:U('Upload/index')}>" method="post" class="am-form image-form" enctype="multipart/form-data">
	    		<div class="am-form-group am-form-file">
	    			<div>
	    			<button type="button" class="am-btn am-btn-default am-btn-sm"><i class="am-icon-cloud-upload"></i> 选择要上传的文件</button>
	    			</div>
	    			<input type="file" name="file" id="doc-ipt-file-2">
	    		</div>
	    		<div class="am-form-group">
					<button type="submit" class="am-btn am-btn-warning" id="imgBtn">上传</button>
			    </div>
			    <div id="errmsg"></div>                
	    	</form>
	    </div>
	</div>
</div>

<div class="footerBox"> <include file="Public:menu_member" /></div>
<input type="hidden" id="hid" value="">
<script>
var yf = 22;
function checkShui(){
    ccs = $("input[name='chechuanshui']:checked").val(); //车船税    
    //未交
    if (ccs==0){
        if ($("#pailiang").val()!=''){
            v = parseFloat($('#pailiang').find('option:selected').attr('data-value'));
            total = v+yf;
            $("#bujiao").html((total)+'<i>元(含22元顺丰快递费)</i>');
            $("#money").val(total);
        }
        $("#wanshui").hide();
    }else{
    	$("#wanshui").show();
        $("#bujiao").html('0');
        $("#money").val(0);
    }  
}

$(function(){    
    $("#pailiang").change(function(){
        if ($(this).val()!=''){
            ccs = $("input[name='chechuanshui']:checked").val(); //车船税
            if (ccs==0){
                v = parseFloat($('#pailiang').find('option:selected').attr('data-value'));
                total = v+yf;
                $("#bujiao").html((total)+'<i>元(含22元快递费)</i>');
                $("#money").val(total);
            }
        }        
    })
})

function checkPai(){
    sp = $("input[name='shangpai']:checked").val(); //是否上牌
    //未交
    if (sp==0){
        $("#hegezheng").show();
        $("#spTime").hide();
    }else{
        $("#hegezheng").hide();
        $("#spTime").show();
    }  
}


function uploadImg(v){
	$("#upModel").modal('open');
	$("#hid").val(v);
}

// JavaScript Document
$(document).ready(function() {   
	//ajaxform
    var options = { 
        beforeSubmit:showRequest,//表单验证方式
        success:showResponse  // post-submit callback 
    }; 

    $('.image-form').ajaxForm(options); 

    function showResponse(responseText, statusText)  {
        if (statusText == 'success') {
            var responseText=eval('('+responseText+')');
            if(responseText.state != 'SUCCESS'){
                 $("#errmsg").html(responseText.state);
                 $("#imgBtn").removeAttr('disabled').html('上传');
            }else{
            	$("#upModel").modal('close');
            	id = $("#hid").val();
            	$("#img"+id).attr("src",responseText.url);
            	$("#card"+id).val(responseText.url);
            	$("#imgBtn").removeAttr('disabled').html('上传');
            }              
        }else{
            $("#errmsg").html('服务器错误');
            $("#imgBtn").removeAttr('disabled').html('上传');
        }
    } 

    function showRequest(){    
    	$("#imgBtn").attr('disabled','disabled').html('<i class="am-icon-spinner am-icon-spin"></i>')   
    }
});
</script>